<template>
  <div class="my">
    <!-- 采用isLogin控制未登录和登录时页面需要展示的东西-->
    <!-- 顶部背景图片 -->
    <!-- 未登录时 -->
    <div class="imgBg" v-if="!isLogin">
      <van-image
        width="100%"
        height="191.1px"
        :src="require('@/assets/imgs/bg.png')"
      />
    </div>
    <!-- 已登录 -->
    <div class="imgBg" v-if="isLogin">
      <van-image
        width="100%"
        height="100%"
        :src="require('@/assets/imgs/avatar-login.png')"
      />
    </div>
    <!-- /顶部背景图片 -->

    <!-- 游客登录提示区 -->
    <div class="login">
      <p class="My_name" v-if="!isLogin">游客</p>
      <p class="My_name" v-if="isLogin">好客_504509</p>
      <van-button
        type="primary"
        class="loginBtn"
        @click="$router.push('/login')"
        v-if="!isLogin"
        >登录</van-button
      >
      <van-button
        type="primary"
        @click="isLoginBtnFn"
        class="loginoutBtn"
        v-if="isLogin"
        >退出</van-button
      >
      <p class="userEdit" v-if="isLogin">
        编辑个人资料
        <span class="my_arrow">
          <van-icon name="play" />
        </span>
      </p>
    </div>
    <!-- /游客登录提示区 -->

    <!-- 游客头像 -->
    <div class="headPhoto" v-if="!isLogin">
      <van-image
        width="90%"
        height="90%"
        round
        :src="require('@/assets/imgs/avatar-no-login.png')"
        class="vanImage"
      />
    </div>
    <div class="headPhoto" v-if="isLogin">
      <van-image
        width="90%"
        height="90%"
        round
        :src="require('@/assets/imgs/avatar-login.png')"
        class="vanImage"
      />
    </div>
    <!-- /游客头像 -->

    <!-- grid标签选择栏 -->
    <div class="selectGrid">
      <van-grid :column-num="3" :border="false" clickable>
        <van-grid-item icon="photo-o" text="我的收藏" @click="collectionFn">
          <template #icon>
            <span class="iconfont icon-coll"></span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="我的出租" @click="myRentFn">
          <template #icon>
            <span class="iconfont icon-ind"></span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="看房记录">
          <template #icon>
            <span class="iconfont icon-record"></span>
          </template>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="3" :border="false" clickable>
        <van-grid-item icon="photo-o" text="成为房主">
          <template #icon>
            <span class="iconfont icon-record"></span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="个人资料">
          <template #icon>
            <span class="iconfont icon-myinfo"></span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="联系我们">
          <template #icon>
            <span class="iconfont icon-cust"></span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- /grid标签选择栏 -->

    <!-- 图片展示区域 -->
    <div class="img">
      <van-image :src="require('@/assets/imgs/join.png')" />
    </div>
    <!-- /图片展示区域 -->
  </div>
</template>

<script>
// 引入vuex
import { mapGetters, mapMutations } from 'vuex'
// 引入提示框Dialog
import { Dialog } from 'vant'

export default {
  name: 'MyIndex',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['isLogin']) //isLogin时为登录状态，!isLogin为未登录状态
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['getUserToken']),
    isLoginBtnFn() {
      // 退出时的取消&确认提示框
      Dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(() => {
          // on confirm
          // 当点击退出，给state里面的getUserToken函数传个空值过去，把token清空为
          this.getUserToken()
        })
        .catch(() => {
          // on cancel
        })
    },
    // 收藏
    collectionFn() {
      if (this.isLogin) {
        this.$router.push('/my/collectlist').catch((err) => {
          return err
        })
      } else {
        this.$router.push('/login')
      }
    },
    myRentFn() {
      if (this.isLogin) {
        this.$router.push('/my/myrent').catch((err) => {
          return err
        })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="less">
.my {
  position: relative;
  height: calc(100vh - 1.33333rem);
  .imgBg {
    height: 600px;
  }
  .login {
    position: absolute;
    top: 270px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 330px;
    background-color: #fff;
    box-shadow: 0 0 10px 3px #ddd;
    .My_name {
      text-align: center;
      margin-top: 100px;
      // margin-bottom: 20px;
      font-size: 26px;
    }
    .loginBtn {
      margin-left: 250px;
      font-size: 26px;
      width: 138px;
      height: 60px;
      line-height: 60px;
      padding: 0 30px;
      border-radius: 8%;
    }
    .userEdit {
      margin-top: 15px;
      font-size: 12px;
      color: #999;
      text-align: center;
    }
    .loginoutBtn {
      height: 40px;
      width: 110px;
      border-radius: 30px;
      color: #fff;
      padding: 2px 15px;
      background: #21b97a;
      font-size: 12px;
      margin-left: 265px;
    }
  }
  .headPhoto {
    position: relative;
    position: absolute;
    top: 270px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 140px;
    width: 140px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 2px #bdbdbd;
  }
  .vanImage {
    position: absolute;
    top: 7px;
    left: 7px;
  }
  .selectGrid {
    padding-top: 30px;
    .iconfont {
      font-size: 40px;
    }
  }
  :deep(.van-grid-item__text) {
    font-size: 26px;
  }
  .img {
    width: 690.36px;
    height: 168px;
    margin: 10px auto;
  }
}
</style>
